<template>
	<view class="enter-shop">
		<NavBar title="申请入驻" :left="true"/>
		<view class="content">
			<uni-forms ref="formRef" :rules="rules" :model="shopInfo">
				<view class="user-info">
					<uni-forms-item name="contacts">
						<view class="item border">
							<view class="label"> 联系人姓名 </view>
							<uni-easyinput class="easy-input" v-model="shopInfo.contacts" placeholder="请填写姓名" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="mobile">
						<view class="item">
							<view class="label"> 联系人电话 </view>
							<uni-easyinput type="number" class="easy-input" v-model="shopInfo.mobile" placeholder="请填写手机号" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
				</view>
				<view class="shop-info">
					<uni-forms-item name="name">
						<view class="item border">
							<view class="label"> {{shopInfo.type==2?'商家':'个人'}}名称 </view>
							<uni-easyinput class="easy-input" v-model="shopInfo.name" placeholder="请输入商家名称" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="describe_text">
						<view class="item border">
							<view class="label"> 商家描述 </view>
							<uni-easyinput class="easy-input" v-model="shopInfo.describe_text" placeholder="请输入商家描述" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<!-- <uni-forms-item name="category_id">
						<view class="item border">
							<view class="label"> 主营类目 </view>
							<view class="value" @tap="selectCategoryRef.open()">
								<view class="text" :class="categoryName?'a-text':''"> {{categoryName?categoryName:'请选择主营类目'}} </view>
								<image src="/static/icon/order/right.png" class="right" />
							</view>
						</view>
					</uni-forms-item> -->
					<uni-forms-item name="region">
						<view class="item border">
							<view class="label"> 店铺坐标 </view>
							<view class="value">
								<picker @change="change" mode="multiSelector" :range="cityList" range-key="label" @columnchange="columnchange">
									<view class="text" :class="region?'a-text':''"> {{ region?region:'请选择店铺坐标' }} </view>
								</picker>
								<image src="/static/icon/order/right.png" class="right" />
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item name="detail_address">
						<view class="item border">
							<view class="label"> 店铺地址 </view>
							<uni-easyinput class="easy-input" v-model="shopInfo.detail_address" placeholder="请输入商家详细地址" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="help_mobile">
						<view class="item">
							<view class="label"> 客服电话 </view>
							<uni-easyinput type="number" class="easy-input" v-model="shopInfo.help_mobile" placeholder="请输入客服电话" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
				</view>
				<view class="shop-intro">
					<uni-forms-item name="intro">
						<view class="item">
							<view class="label"> 商家简介 </view>
						</view>
						<view class="intro">
							<textarea v-model="shopInfo.intro" placeholder="请输入商家简介" placeholderStyle="font-size: 14px;color: #C4C4C4;" maxlength="100"></textarea>
							<view class="intro-num"> {{shopInfo.intro.length}}/100 </view>
						</view>
					</uni-forms-item>
				</view>
				<view class="shop-logo">
					<uni-forms-item name="logo">
						<text class="title"> {{shopInfo.type==2?'商家logo':'个人头像'}} </text>
						<view class="img-box">
							<image :src="logoUrl" v-if="logoUrl" class="img" />
							<AddBtn @choose="chooseLogo" v-else />
						</view>
					</uni-forms-item>
				</view>
				<view class="shop-img" v-if="shopInfo.type == 2">
					<uni-forms-item name="head_imgs">
						<text class="title"> 商家门店照片(3-5张) </text>
						<view class="img-box">
							<image :src="item" v-for="item in shopHeadImgs" v-if="shopHeadImgs.length" class="img" :key="item"/>
							<AddBtn @choose="chooseHeadImgs" v-if="shopHeadImgs.length < 5" />
						</view>
					</uni-forms-item>
				</view>
				<view class="shop-img" v-else>
					<uni-forms-item name="business_license">
						<text class="title"> 个人证明照片(3-5张) </text>
						<view class="img-box">
							<image :src="item" v-for="item in userBusiness" v-if="userBusiness.length" class="img" :key="item"/>
							<AddBtn @choose="chooseBusiness" v-if="userBusiness.length < 5"/>
						</view>
					</uni-forms-item>
				</view>
				<view class="zmcl" v-if="shopInfo.type == 2">
					<uni-forms-item name="business_license">
						<text class="title"> 证明材料(营业执照) </text>
						<view class="img-box">
							<image :src="shopBusiness" v-if="shopBusiness" class="img"/>
							<AddBtn @choose="chooseShopBusiness" v-else />
						</view>
					</uni-forms-item>
				</view>
				<view class="id-number">
					<uni-forms-item name="id_code">
						<view class="item">
							<view class="label"> 身份证号码 </view>
							<uni-easyinput class="easy-input" v-model="shopInfo.id_code" placeholder="请输入身份证号" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
				</view>
				<view class="id-img">
					<text class="title"> 上传证件 </text>
					<IDBOX @idImg="idImg"/>
				</view>
				<view class="user-pwd">
					<uni-forms-item name="name">
						<view class="item border">
							<view class="label"> 登陆账号 </view>
							<view class="value"> {{mobile}} </view>
						</view>
					</uni-forms-item>
					<uni-forms-item name="name">
						<view class="item">
							<view class="label"> 登陆密码 </view>
							<view class="value"> ******** </view>
						</view>
					</uni-forms-item>
				</view>
			</uni-forms>
			<view class="warn-tips"> 温馨提示：审核通过后，商家后台登陆的账号就是您注册平台的账号,密码是xg88888888 </view>
			<view class="btn" @tap="submit"> 提交申请 </view>
		</view>
		<!-- 选择主营类目 -->
		<!-- <SelectCategory ref="selectCategoryRef" @selectCategory="selectCategory" /> -->
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import IDBOX from '@/components/IDBOX.vue'
	import NavBar from '@/components/NavBar.vue'
	import AddBtn from '@/components/ChooseBtn.vue'
	import SelectCategory from './components/SelectCategory.vue'
	import { isCardID, isMobile, isNull } from '@/utils/valdate.js'
	import { GetRegionApi, GetMainCategoryApi, EnterShopApi } from '@/service/index.js'
	import { useAddressStore, useMiddleWare, useUserStore } from '@/store/index.js'
	const formRef = ref()
	// const selectCategoryRef = ref()
	const mobile = computed(() => {
		const { userInfo } = useUserStore()
		return userInfo.mobile
	})
	const shopInfo = ref({
		contacts: '', // 联系人
		mobile: '',   // 联系方式
		name: '', 		// 商户名称
		describe_text: '', // 商家描述
		category_id: '',   // 类目id
		longitude: '',
		latitude: '', 
		detail_address: '', // 店铺详细 (需要带上省市区县)
		region: '', 		    // 省市区/县 获得省市区接口获得
		help_mobile: '',    // 客服电话
		intro: '', 			    // 商家简介
		logo: '',
		head_imgs: '', 	    // 商家门店照片 上传图片接口拼接ID 个人申请不填写传空
		business_license: '', // 营业执照/个人证明照片 上传图片接口拼接ID
		id_code: '',  // 身份证号
		id_img_1: '',
		id_img_2: '',
		id_img_3: '',
		type: '',    // 2=企业入住申请 1=个人入住申请
		tid: '',     // 非必填选项 代理商分享二维码时带过来的
	})
	const logoUrl = ref('')      // 此字段仅展示 logo地址
	const region = ref('')       // 此字段仅展示 坐标名称
	const categoryName = ref('') // 此字段仅展示 类目名称
	const shopHeadImgs = ref([]) // 此字段仅展示 店铺图片
	const userBusiness = ref([]) // 此字段仅展示 用户证明材料
	const shopBusiness = ref('') // 此字段仅展示 商户证明材料
	const rules = {
		name: isNull(shopInfo.value.type == 2 ?'商家名称': '个人名称'),
		contacts: isNull('联系人姓名'),
		mobile: isMobile(),
		describe_text: isNull('商家描述'),
		// category_id: isNull('主营类目'),
		region: isNull('店铺坐标'),
		detail_address: isNull('店铺地址'),
		help_mobile: isMobile(),
		intro: isNull('商家简介'),
		logo: isNull(shopInfo.value.type == 2 ?'商家logo': '个人头像'),
		head_imgs: isNull('商家门店照片'),
		business_license: isNull(shopInfo.value.type == 2 ?'证明材料': '个人证明照片'),
		id_code: isCardID()
	}
	const cityList = ref([[],[],[]])
	const columnchange = (e) => {
		const { detail } = e
		if(detail.column === 2) return
		let region = cityList.value[detail.column][detail.value].value
		getRegion(region, detail.column)
	}
	const change = (e) => {
		let arr = []
		e.detail.value.forEach((item, index) => {
			arr.push(cityList.value[index][item].label)
			if(index == 2) [
				shopInfo.value.region = cityList.value[index][item].value
			]
		})
		region.value = arr.join(' ')
	}
	const getRegion = (region,index) => {
		GetRegionApi({region}).then(res => {
			cityList.value[index+1] = res
			if(index == 0) {
				GetRegionApi({region: cityList.value[index+1][0].value}).then(sec => {
					cityList.value[index+2] = sec
				})
			}
		})
	}
	// 选择主营类目
	// const selectCategory = (e) => {
	// 	shopInfo.value.category_id = e.id
	// 	categoryName.value = e.title
	// }
	const idImgObj = ref({})
	const idImg = (e) => {
		idImgObj.value = { ...e }
	}
	// 选择logo
	const chooseLogo = (e) => {
		shopInfo.value.logo = e.id
		logoUrl.value = e.img_url
	}
	// 选择商家门店照片
	const chooseHeadImgs = (e) => {
		if (shopHeadImgs.value.length === 5) return
		if (shopInfo.value.head_imgs == '') {
			shopInfo.value.head_imgs = shopInfo.value.head_imgs + e.id
		} else {
			shopInfo.value.head_imgs = shopInfo.value.head_imgs + ',' + e.id
		}
		shopHeadImgs.value.push(e.img_url)
	}
	// 选择个人证明照片
	const chooseBusiness = (e) => {
		if (userBusiness.value.length === 5) return
		if (shopInfo.value.business_license == '') {
			shopInfo.value.business_license = shopInfo.value.business_license + e.id
		} else {
			shopInfo.value.business_license = shopInfo.value.business_license + ',' + e.id
		}
		userBusiness.value.push(e.img_url)
	}
	// 选择商家证明照片
	const chooseShopBusiness = (e) => {
		shopInfo.value.business_license = e.id
		shopBusiness.value = e.img_url
	}
	// 提交申请
	const submit = () => {
		const { lonlat } = useAddressStore()
		const { tid } = useMiddleWare()
		formRef.value.validate().then(() => {
			const { id_img_1, id_img_2, id_img_3 } = idImgObj.value
			if(!id_img_1) return getApp().globalData.toast('请上传身份证正面照片')
			if(!id_img_2) return getApp().globalData.toast('请上传身份证反面照片')
			if(!id_img_3) return getApp().globalData.toast('请上传手持身份证照片')
			let params = {
				...shopInfo.value,
				...idImgObj.value,
				latitude: lonlat.latitude,
				longitude: lonlat.longitude,
				tid
			}
			EnterShopApi(params).then(res => {
				let navParams = {
					tit: '提交成功',
					tips: '您的企业入驻商户已提交，请耐心等待平台审核！',
					submitText: '返回首页',
				}
				uni.navigateTo({
					url: `/pages/auditStatus/auditStatus?title=申请结果&params=${JSON.stringify(navParams)}`
				})
			})
		})
	}
	onLoad((e) => {
		const { type } = e
		shopInfo.value.type = type
		GetRegionApi().then(res => {
			cityList.value[0] = res
			GetRegionApi({region: cityList.value[0][0].value}).then(sec => {
				cityList.value[1] = sec
				GetRegionApi({region: sec[0].value}).then(thi => {
					cityList.value[2] = thi
				})
			})
		})
	})
</script>

<style lang="scss" scoped>
	.enter-shop {
		.content {
			width: 100%;
			padding: 10px 12px;
			box-sizing: border-box;
			.user-info, .shop-info,.shop-intro,.id-number,.user-pwd {
				padding: 0 16px;
				border-radius: 10px;
				background-color: #fff;
				margin-bottom: 10px;
				.uni-forms-item {
					margin-bottom: 0;
					align-items: center;
					min-height: 50px;
					.item {
						height: 50px;
						display: flex;
						align-items: center;
						box-sizing: border-box;
						.label {
							color: #333333;
							font-size: 16px;
							font-weight: 400;
							margin-right: 10px;
							position: relative;
							&::before {
								position: absolute;
								top: 0;
								right: -7.5px;
								display: block;
								content: '*';
								color: red;
								font-size: 16px;
							}
						}
						.value {
							flex: 1;
							display: flex;
							color: #333333;
							margin-left: 10px;
							align-items: center;
							padding-right: 10px;
							justify-content: end;
							.text {
								flex: 1;
								color: #c4c4c4;
								font-size: 14px;
								font-weight: 400;
								text-align: right;
								&.a-text {
									color: #333333;
								}
							}
							.right {
								width: 14px;
								height: 14px;
							}
						}
						.easy-input {
							flex: 1;
							color: #c4c4c4;
							font-size: 14px;
							font-weight: 400;
							text-align: right;
							margin-left: 10px;
						}
					}
					.border {
						border-bottom: 1px solid #e5e5e5;
					}
				}
				:deep(.uni-forms-item__error) {
					left: 0;
					top: 100%;
					right: 12px;
					font-size: 12px;
					text-align: right;
					padding-bottom: 3px;
					transform: translateY(-100%);
				}
			}
			.shop-intro {
				.uni-forms-item {
					margin-bottom: 0;
				}
				.item {
					height: 40px;
					border-bottom: 0;
					padding-top: 16px;
				}
				.intro {
					padding: 5px 0 10px;
					textarea {
						width: 100%;
						height: 120px;
						color: #333333;
						font-size: 14px;
						font-weight: 400;
						line-height: 20px;
					}
					.intro-num {
						font-weight: 400;
						font-size: 14px;
						color: #C4C4C4;
						line-height: 20px;
						text-align: right;
					}
				}
			} 
			.shop-logo, .shop-img, .zmcl {
				padding: 20px 16px;
				border-radius: 10px;
				margin-bottom: 10px;
				background-color: #fff;
				box-sizing: border-box;
				.uni-forms-item {
					margin-bottom: 0;
				}
				.title {
					color: #333333;
					font-size: 16px;
					position: relative;
					&::before {
						position: absolute;
						top: 0;
						right: -7.5px;
						display: block;
						content: '*';
						color: red;
						font-size: 16px;
					}
				}
				.img-box {
					display: grid;
					gap: 10px;
					margin-top: 15px;
					grid-template-columns: repeat(3, 1fr);
					.img {
						width: 74px;
						height: 74px;
						border-radius: 10px;
					}
				}
			}
			.id-img {
				border-radius: 10px;
				margin-bottom: 10px;
				background-color: #fff;
				padding: 20px 16px 10px;
				box-sizing: border-box;
				.title {
					color: #333333;
					font-size: 16px;
					position: relative;
					&::before {
						position: absolute;
						top: 0;
						right: -7.5px;
						display: block;
						content: '*';
						color: red;
						font-size: 16px;
					}
				}
				.id-box {
					margin-top: 19px;
				}
				.tips {
					color: #FF3B1E;
					font-size: 12px;
					font-weight: 400;
					line-height: 20px;
				}
			}
			.warn-tips {
				color: #FF3B1E;
				font-size: 12px;
				font-weight: 400;
				line-height: 20px;
			}
			.btn {
				height: 50px;
				color: #FFFFFF;
				font-size: 17px;
				font-weight: 500;
				margin-top: 10px;
				line-height: 50px;
				text-align: center;
				background: #FF3B1E;
				border-radius: 106px;
			}
		}
	}
</style>
